<template>
  <div>
    <!-- 弹窗开头 -->
    <el-dialog :title="obj.isAdd?'菜单添加':'菜单编辑'" :visible.sync="obj.isShow" width="30%">
      <!-- 中间表单 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="菜单名称">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单">
          <el-select v-model="form.pid" placeholder="请选择上级菜单" @change="changePid()"  >
            <el-option label="顶级菜单" :value="0"></el-option>
            <el-option v-for="item in menuList" :key="item.id" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型">
               <!-- 注意二选一的单选框中label是value值，标签中间是名字 -->
            <el-radio :label="1" v-model="form.type" disabled >目录</el-radio>
            <el-radio :label="2" v-model="form.type" disabled >菜单</el-radio>
        </el-form-item>
        <el-form-item label="菜单图标" v-if="form.type ==1">
          <el-select v-model="form.icon" placeholder="请选择图标">
            <el-option
              v-for="(item, index) in iconArr"
              :key="index"
              :value="item"
            >
              <i :class="item"></i>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单地址" v-else>
          <el-select v-model="form.url" placeholder="请选择菜单地址">
            <el-option
              v-for="(item, index) in twoRouter"
              :key="index"
              :label="item.meta.title"
              :value="'/' + item.path"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
        </el-form-item>
      </el-form>

      <!-- 尾部取消确定 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="yesdo()"
        v-if="obj.isAdd"  >添加</el-button
        >
        <el-button type="primary" @click="updata()"
         v-else >编辑</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import {twoRouter} from "../../../router/index.js"
import {menuAdd,menuInfo,menuEdit} from "../../../request/api.js"
import {sucessAlert,warningAlert} from "../../../utils/alert.js"
export default {
  props: ["obj"],
  components: {
  },
  data() {
    return {
      // 后台数据
      form:{
        pid:0,
        title:"",
        icon:"",
        type:1,
        url:"",
        status:1
      },
      // 作用：用来渲染菜单图标部分，供用户去选择
      iconArr:["el-icon-delete","el-icon-user","el-icon-star-off","el-icon-goods","el-icon-warning-outline"],
      //渲染菜单
      twoRouter:twoRouter
    };
  },
  computed: {
    ...mapGetters({
         menuList:"menu/list",
    }),
  },
  methods: {
    ...mapActions({
        asyncMenuList:"menu/asyncList",
    }),
    // 判断菜单地址和菜单图片哪一个显示
    changePid(){
        if(this.form.pid == 0){
        // 说明你添加的是目录
        this.form.type = 1
        // 清空上一次你选择的地址
        this.form.url = ""
      }else{
        // 说明你添加的是菜单
        this.form.type = 2
        // 清空上一次你选择的图标
        this.form.icon = ""
      }
    },
    //清空表单数据
    empty(){
        this.form={
                pid:0,
                title:"",
                icon:"",
                type:1,
                url:"",
                status:1
              }
    },
    // 取消菜单添加功能
    cancel(){
       // 清空内容
       this.empty(),
      // 关闭弹窗
        this.obj.isShow=false
    },
    //确定添加功能
    yesdo(){
        menuAdd(this.form).then(res=>{
          // 添加成功
      if(res.status==200){
                sucessAlert(res.data.msg),
          // 关闭弹窗并清空内容
          this.cancel()
          // 刷新列表数据
          this.asyncMenuList()
            }else{
              // 添加失败
                warningAlert(res.data.msg)
            }
            console.log(this.form)
        }
         
        )
      // console.log(this.form)
    },
      //获取一条菜单
    getOne(id){
      menuInfo({id:id}).then(res=>{
        // 给form赋值，用来渲染页面
        this.form = res.data.list
        // 给form添加id字段，因为后期我们点击编辑按钮的时候，form中需要id字段
        this.form.id = id
    })
    },
    //确认编辑
    updata(){
      menuEdit(this.form).then(res=>{
        if(res.data.code == 200){
            // 成功的提示窗
            sucessAlert(res.data.msg)
            // 关闭遮罩层并清空form数据
            this.cancel()
            // 刷新列表数据
            this.asyncMenuList()
        }else{
            // 失败的提示窗
            warningAlert(res.data.msg)
        }
    })
    }
    },
  mounted() {},
};
</script>
<style scoped>
</style>